<script setup>
//组建库
import axios from 'axios';
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';


onMounted(() => {
  queryAll()
})

let tableData = ref([])

const queryAll = () => {
  axios.get('http://127.0.0.1:8080/member/queryAll')
      .then(res => {
        console.log(res.data)
        tableData.value = res.data;
      }).catch(err => {
    console.error(err)
  })
}


const removeById = (id) => {
  console.log(id)
  ElMessageBox.confirm(
      '确定删除该记录吗',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        axios.delete('http://127.0.0.1:8080/member/removeById', {data: {id: id}})
            .then(res => {
              if (res.data) {
                ElMessage.success('删除成功')
                queryAll()
              } else {
                ElMessage.error('删除失败')
              }
            })
            .catch(err => {
              console.error(err)
              ElMessage.error('删除失败')
            })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

</script>
<template>
  <div>
    <el-card>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="nickname" label="昵称"/>
        <el-table-column prop="email" label="邮箱"/>
        <el-table-column prop="telephone" label="电话"/>
        <el-table-column prop="avatar" label="头像">
          <template #default="scope">
            <img :src="`http://127.0.0.1:8081/${scope.row.avatar}`" alt="" height="30">
          </template>
        </el-table-column>
        <el-table-column prop="dob" label="生日"/>
        <el-table-column prop="favorites" label="喜好"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="success" size="small" @click="queryById(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="removeById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>



<style scoped>

</style>